<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <title>葡萄藤PPT</title>

    <link rel="stylesheet" href="../css/reveal/reveal.css">

    <!-- PPT主题，可以在/css/reveal/theme/中选择其他主题，目前暂时只能使用该模板 -->
    <link rel="stylesheet" href="../css/reveal/theme/ptt.css">

    <!-- syntax highlighting 代码高亮主题 -->
    <link rel="stylesheet" href="../lib/reveal/css/zenburn.css">

    <!-- 打印和PDF输出样式 -->
    <script>
        var link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = window.location.search.match(/print-pdf/gi) ? '../css/reveal/print/pdf.css' : '../css/reveal/print/paper.css';
        document.getElementsByTagName('head')[0].appendChild(link);
    </script>
    <style>
        .reveal pre code {
            background-color: #120;
        }
        .reveal p{
            font-size: 30px;
        }
    </style>
</head>

<body>
<img src="../img/demo/logo.png" alt="" usemap="#pttmap" class="base-logo">
<map name="pttmap">
    <area shape="rect" coords="0,0,276,58" href="http://www.jnshu.com" alt="" target="_blank"/>
</map>
<div class="reveal slide center" role="application" data-transition-speed="default" data-background-transition="fade">
    <div class="slides" style="width: 960px; height: 700px; left: 50%; top: 50%; bottom: auto; right: auto; transform: translate(-50%, -50%) scale(0.756);">
        <section class="present" style="top: 202.5px; display: block;">
            <h3>angular路由</h3>
            <h4>北京小课堂</h4>
            <p>分享人：吴昊杰</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 3px; display: block;">
            <p>目录</p>
            <p>1.背景介绍</p>
            <p>2.知识剖析</p>
            <p>3.常见问题</p>
            <p>4.解决方案</p>
            <p>5.编码实战</p>
            <p>6.拓展思考</p>
            <p>7.参考文献</p>
            <p>8.更多讨论</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 188px; display: block;">
            <h3>1.背景介绍</h3>
            <p>一般来说，我们认为AngularJS是一套前端的MVC框架。那么，为了实现视图的中转，肯定会涉及到路由的概念。这里我们就来说说有关AngularJS的路由——ngRoute。</p>
        </section>
        <section>
            <p>
                首先谈谈APP应用。平时我们用的app总是多页面，如果用原生安卓或者苹果，那当然很流畅啦。但是当我们用一般的html页面做移动端，简单时候我们可以用这样的标签去链接页面时，速度还是可以的。 　　但是当我们的应用越来越多时，切换起来没那么流畅。又是碍于网速，页面加载进来有点慢。但是在angular里面，我们可以用路由进行切换。因为在angular里面，我们用户一般在加载这样的应用时，会整个的缓存在手机上。我们用路由进行切换时，不用再发起HTTP请求了。体验比原来好。
            </p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h3>2.知识剖析</h3>
            <p>ngRoute是一个AngularJS的模块。其不是在AngularJS的核心库当中。

                在使用ngRoute的时候，实际上，我们是在应用的主模块中引入ngRoute模块并添加$routeProvider服务到主模块的config方法中来达到我们的目标。这与其他一些库的使用方式是类似的，如ng-grid。

                在ngRoute中，主要有$route、$routeProvider、$routeParams三个服务项目。

                $routeProvider用于在主应用主模块的配置方法中。$route与$routeParams一般常见于控制器中。
            </p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <ul>
                <li>服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射</li>
                <li>服务$routeParams保存了地址栏中的参数</li>
                <li>服务$location用来实现用于获取当前url以及改变当前的url,并且存入历史记录</li>
                <li>服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller</li>
                <li>指令ngView用来在主视图中指定加载子视图的区域</li>
            </ul>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <p>
                angular路由可以实现多视图的单页Web应用。 当请求一个url时，根据路由配置匹配这个url，然后请求模板片段，并插入到ng-view中去。这种做法使网页局部刷新，减少了切换网页时带来的突兀感， 也减少了项目的代码量。
            </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h4>3.常见问题 </h4>
            <p>ngRoute实现原理和如何使用路由？</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h3 style="letter-spacing: 5px">ngRoute实现原理</h3>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <p class="a">我们知道，设置</p>
            <pre><code class="hljs stylus">
                &lt;<span class="hljs-selector-tag">a</span> href=<span class="hljs-string">"#div1"</span>&gt;div1&lt;/a&gt;
                 &lt;<span class="hljs-selector-tag">a</span> href=<span class="hljs-string">"#div2"</span>&gt;div2&lt;/a&gt;
                 &lt;<span class="hljs-selector-tag">a</span> href=<span class="hljs-string">"#div3"</span>&gt;div3&lt;/a&gt;
            &lt;<span class="hljs-selector-tag">div</span> id=<span class="hljs-string">"div1"</span>&gt;我是div1&lt;/div&gt;
                &lt;<span class="hljs-selector-tag">div</span> id=<span class="hljs-string">"div2"</span>&gt;我是div2&lt;/div&gt;
                &lt;<span class="hljs-selector-tag">div</span> id=<span class="hljs-string">"div3"</span>&gt;我是div3&lt;/div&gt;






            </code></pre>

            <p class="a"> 这样的锚点，a链接会在同一页面中跳转。ngRoute利用了这一特性将锚点出的文件设置为模板，在锚点被链接时，监听到url的变化，加载相应的模板文件。
            </p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h3>4.解决方案</h3>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h3>NGROUTE包含以下部分：</h3>
            <p>服务$routeProvider用来定义一个路由表，即地址栏与视图模板的映射</p>
            <p>服务$routeParams保存了地址栏中的参数</p>
            <p>服务$location用来实现用于获取当前url以及改变当前的url,并且存入历史记录</p>
            <p>服务$route完成路由匹配，并且提供路由相关的属性访问及事件，如访问当前路由对应的controller</p>
            <p>指令ngView用来在主视图中指定加载子视图的区域</p>
            <p>$routeProvider提供了定义路由表的服务，它有两个核心方法，when(path,route)和otherwise(params)。</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h4>ngRoute的使用</h4>
            <p class="a">
                a.引入两个文件，angular和angular-route：
            </p>
            <pre>                    <code class="hljs dust"><span class="xml">
                        <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"angular.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"angular-route.min.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
                    </span></code>
            </pre>
            <p class="a">b.主页面中设置容器ng-view</p>

            <p class="a">
                c.然后在ng-app中注入ngRoute
            </p>
            <p class="a">d.最后配置路由表</p>
        </section>

        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <p class="a">一个简单的ngRoute结构示例</p>
            <pre>                    <code class="hljs xquery">
        &lt;script&gt;
            angular.module(<span class="hljs-string">'indexApp'</span>, [ngRoute])
            .config([<span class="hljs-string">'$routeProvider'</span>, <span class="hljs-keyword">function</span> ($routeProvider) {
                $routeProvider
                    .when(<span class="hljs-string">'/div1'</span>, {
                        template: <span class="hljs-string">'&lt;p&gt;这是div1{{text}}&lt;/p&gt;'</span>,
                        controller: <span class="hljs-string">'div1Controller'</span>
                    })
                    .when(<span class="hljs-string">'/div2'</span>, {
                        template: <span class="hljs-string">'&lt;p&gt;这是div2{{text}}&lt;/p&gt;'</span>,
                        controller: <span class="hljs-string">'div2Controller'</span>
                    })
                    .when(<span class="hljs-string">'/div3'</span>, {
                        template: <span class="hljs-string">'&lt;p&gt;这是div3{{text}}&lt;/p&gt;'</span>,
                        controller: <span class="hljs-string">'div3Controller'</span>
                    })
                    .when(<span class="hljs-string">'/content/:id'</span>, {
                        template: <span class="hljs-string">'&lt;p&gt;这是content{{id}}&lt;/p&gt;'</span>,
                        controller: <span class="hljs-string">'div4Controller'</span>
                    })
                    .otherwise({
                        redirectTo: <span class="hljs-string">'/div1'</span>

                    });
            }]);

        &lt;/script&gt;
            </code>
            </pre>
        </section>



        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h3>5.参考文献</h3>
            <p>菜鸟教程</p>
            <p>AngularJS路由二三事（一）：ngRoute</p>
            <p>ngRoute 模块_AngularJS中文网</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h3>6.更多讨论</h3>
            <p>为什么推荐用ui-router替代ngRoute</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <p>ngRoute在路由配置时用$routeProvider。</p>
            <p>ui-router路由配置时用 $stateProvider 和$urlRouterProvider。</p>
            <p>ngRoute是官方路由。</p>
            <p>ui-route是第三方路由。</p>
            <p>ngroute是用AngularJS框架的核心部分。</p>
            <p>ui-router是一个社区库，它是用来提高完善ngroute路由功能的。</p>
            <p>ui-router允许嵌套视图(nested views)和多个命名视图(multiple named views)。</p>
        </section>
        <section hidden="" aria-hidden="true" class="future" style="top: 330px; display: none;">
            <h4>鸣谢</h4>
            <p>感谢大家观看</p>
            <p><small>BY :  李仁 | 吴昊杰</small></p>
        </section>
    </div>

    <div class="backgrounds"><div class="slide-background present" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" data-loaded="true" style="display: block;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div><div class="slide-background future" style="display: none;"></div></div><div class="progress" style="display: block;"><span style="width: 0px;"></span></div><aside class="controls" style="display: block;"><button class="navigate-left" aria-label="previous slide"></button><button class="navigate-right enabled" aria-label="next slide"></button><button class="navigate-up" aria-label="above slide"></button><button class="navigate-down" aria-label="below slide"></button></aside><div class="slide-number" style="display: none;"></div><div class="speaker-notes" data-prevent-swipe=""></div><div class="pause-overlay"></div><div id="aria-status-div" aria-live="polite" aria-atomic="true" style="position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);">
    angular路由
    小课堂
    分享人: 吴昊杰
</div></div>
<script src="../lib/reveal/js/head.min.js"></script>
<script src="../lib/reveal/reveal.js"></script>
<script>
    // 以下为常见配置属性的默认值
    // {
    // 	controls: true, // 是否在右下角展示控制条
    // 	progress: true, // 是否显示演示的进度条
    // 	slideNumber: false, // 是否显示当前幻灯片的页数编号，也可以使用代码slideNumber: 'c / t' ，表示当前页/总页数。
    // 	history: false, // 是否将每个幻灯片改变加入到浏览器的历史记录中去
    // 	keyboard: true, // 是否启用键盘快捷键来导航
    // 	overview: true, // 是否启用幻灯片的概览模式，可使用"Esc"或"o"键来切换概览模式
    // 	center: true, // 是否将幻灯片垂直居中
    // 	touch: true, // 是否在触屏设备上启用触摸滑动切换
    // 	loop: false, // 是否循环演示
    // 	rtl: false, // 是否将演示的方向变成RTL，即从右往左
    // 	fragments: true, // 全局开启和关闭碎片。
    // 	autoSlide: 0, // 两个幻灯片之间自动切换的时间间隔（毫秒），当设置成 0 的时候则禁止自动切换，该值可以被幻灯片上的 ` data-autoslide` 属性覆盖
    // 	transition: 'default', // 切换过渡效果，有none/fade/slide/convex/concave/zoom
    // 	transitionSpeed: 'default', // 过渡速度，default/fast/slow
    // 	mouseWheel: true, //是否启用通过鼠标滚轮来切换幻灯片
    // }
    // 初始化幻灯片
    Reveal.initialize({
        history: true,
        dependencies: [{
            src: '../plugin/markdown/marked.js'
        },
            {
                src: '../plugin/markdown/markdown.js'
            },
            {
                src: '../plugin/notes/notes.js',
                async: true
            },
            {
                src: '../plugin/highlight/highlight.js',
                async: true,
                callback: function() {
                    hljs.initHighlightingOnLoad();
                }
            }
        ]
    });
</script>
</body>

</html>